<template>
	<!-- 风险销号 -->
	<div class="risk_pin_number" style="height:100%">
		<div style="color:#2FB5B7;">风险销号</div>
		<!-- 销号风险数量 -->
		<div class="pin_number_trend">
			<div class="pin_number_title">销号风险数量: {{fxxhData.statistics}}项</div>
			<div style="height:100%;width: 100%;position: absolute;top:0;">
				<pie-echarts pieid="fxxhId" piename="风险销号" :piecolor="pieColorFour" :piedata="fxxhData.pieData" legendflag="true"></pie-echarts>
			</div>
		</div>
		<!-- 销号趋势 -->
		<div class="pin_number_trend">
			<div class="pin_number_title qs">销号趋势 :</div>
			<div style="width:100%;height: 100%;float: right;">
				<line-echarts lineid="xhqsid" linetype="oneLine" :linename="['销号趋势']" :linedatax="fxxhData.lineDataX" :linedatay="fxxhData.lineDataY"></line-echarts>
			</div>
		</div>
	</div>
</template>


<script>
	import PieEcharts from '%/modules/bi/PieEcharts'
	import LineEcharts from '%/modules/bi/LineEcharts'
	export default {
		name: 'bi-fxxh',
		components: {
			PieEcharts,
			LineEcharts
		},
		created() {
			//集团用户
			this.btnHidden = this.personType === 1 ? false : true;
			this.getFxxhData(0);
		},
		mounted() {},
		data() {
			return {
				userDetail: JSON.parse(localStorage.getItem('userList')),
				personType: JSON.parse(localStorage.getItem('personType')),
				pieColorFour: ['#ED4C46', '#F49F42', '#EEDD78', '#3090B8'],
				//风险销号
				fxxhData: {
					statistics: null,
					pieData: [],
					lineDataX: [],
					lineDataY: []
				},
			}
		},
		methods: {
			// 获取风险销号
			getFxxhData(index) {

				this.$api.bi.getFxxhData(this.userDetail.enterpriseId).then(res => {
					if (res.code === 200) {
						this.fxxhData.statistics = res.data.levelTotal.count_0;
						this.fxxhData.pieData = [{
								value: res.data.levelTotal.count_1,
								name: 'I级风险',
							},
							{
								value: res.data.levelTotal.count_2,
								name: 'II级风险'
							},
							{
								value: res.data.levelTotal.count_3,
								name: 'III级风险'
							},
							{
								value: res.data.levelTotal.count_4,
								name: 'IV级风险'
							}
						];
						res.data.destroyTrend.forEach((item) => {
							this.fxxhData.lineDataX.push(item.name);
							this.fxxhData.lineDataY.push(item.count);
						})
					} else {
						this.$Message.error(res.message)
					}
				})

			}

		}
	}
</script>

<style scoped lang="scss">
	.risk_pin_number {
		height: 100%;
		position: relative;
		width: calc(35% - 7.5px);
		background-image: url('../../../../src/assets/images/bi/risk_pin_number.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 19px 15px;
		box-sizing: border-box;
		.bi_box_title {
			color: #2FB5B7;
			font-size: 13px;
			margin-top: 5px;
		}

		.pin_number_trend{
			position: relative;
			height:calc(50% - 10px);
			.pin_number_title{
				color:#2FB5B7;
				font-size: 13px;
				margin-top: 5px;
				position: absolute;
				left:0;
				top:0;
				&.qs{
					top:-11px;
				}

			}
		}
	}
</style>
